<template>
	<transition name="el-fade-in" v-if="payByCardSuccess">
	<!-- <transition name="el-fade-in"> -->
		<div class="payByCardSuccessBox"  v-if="res=='success'">
			<!-- 			<div class="topBox">
				<div class="topBoxLeft">{{paySuccessOrderTime}}s</div>
				<div class="topBoxRight el-icon-close" @click="hidBox()">
				</div>
			</div> -->
			<div class="itemIitle hui cardMar">支付金额：<span class="red">{{$store.state.user.chargefee}}元</span></div>
			<img src="@/assets/images/zhifuchenggong.png" class="successBox"></img>
			<div class="itemIitle deepHui ">恭喜您，支付成功</div>
			<!-- <div class="itemIitle hui " v-if="code!='mzyy'&&code!='mzgh'">{{paySuccessOrderTime}}秒后返回首页</div> -->
			<div class="itemIitle hui ">凭条正在打印中，请稍候······</div>
		</div>
		<div class="payByCardErrorBox" v-if="res=='fail'">
			<div class="topBox">
				<div class="topBoxLeft">{{paySuccessOrderTime}}s</div>
				<div class="topBoxRight el-icon-close" @click="hidBox()">
				</div>
			</div>
			<div class="itemIitle hui cardMar">支付金额：<span class="red">￥{{$store.state.user.chargefee}}元</span></div>
			<img src="@/assets/images/shibai.png" class="successBox"></img>
			<div class="itemIitle deepHui ">很抱歉，支付失败</div>
			<!-- <div class="itemIitle hui " v-if="code!='mzyy'&&code!='mzgh'">{{paySuccessOrderTime}}秒后返回首页</div> -->
			<!-- <div class="itemIitle hui " >{{paySuccessOrderTime}}秒后返回打印凭条</div> -->
			<!-- <div class="itemIitle hui ">挂号凭条正在打印中，请稍后······</div> -->
		</div>
	</transition>
</template>

<script>
	export default {
		name: "PaySuccess",
		data() {
			return {
				paySuccessOrderTime: 2,
				//支付成功时间对象
				mySuccessVal: '',
				payByCardSuccess: false
			}
		},
		props: {
			money: String,
			title: String,
			res: String,
			code: String
		},
		methods: {
			init() {
				console.log(this.$store.state, '缓存')
				let _this = this;
				_this.payByCardSuccess = true;
				clearInterval(_this.mySuccessVal);
				_this.mySuccessVal = window.setInterval(() => {
					let dataTime = _this.paySuccessOrderTime;
					if (dataTime >= 1) {
						dataTime -= 1;
						_this.paySuccessOrderTime = dataTime;
					} else {
						_this.payByCardSuccess = false;
						clearInterval(_this.mySuccessVal);
						if (false) {
							// 返回首页
							_this.goBackHome();
						} else {
							if (this.res == 'success'||this.res=='1') {
								//打开凭条
								_this.$emit('openPrintTip', '1');
							} else if (this.res == 'fail') {
								_this.hidBox();
							}
						}
					}
				}, 1000);
			},
			//立刻打开
			openImmideaty() {
				this.payByCardSuccess = false;
				clearInterval(this.mySuccessVal);
				if (false) {
					// 返回首页
					this.goBackHome();
				} else {
					console.log('打开凭条')
					//打开凭条
					this.$emit('openPrintTip', '1');
				}
			},
			returnIsShow() {
				return this.payByCardSuccess;
			},
			hidBox() {
				this.payByCardSuccess = false;
			}
		},
		mounted() {},
	}
</script>

<style scoped>
	@media  (min-height: 0px) and (max-height: 1910px) {
		.payByCardErrorBox {
			position: fixed;
			width: 33.125rem;
			height: 26.375rem;
			background: #FFFFFF;
			bottom: 202px;
			left: 250px;
			z-index: 3;
			text-align: center;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
		}

		.payByCardSuccessBox {
			position: fixed;
			width: 33.125rem;
			padding-bottom: 2rem;
			/* height: 26.375rem; */
			background: #FFFFFF;
			top: calc(50% - 16.5625rem);
			left: calc(50% - 17.1875rem);
			z-index: 3;
			text-align: center;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
			padding-top: 20px;
		}

	}

	@media  (min-height: 1919px)  {

		.payByCardErrorBox {
			position: fixed;
			background: #FFFFFF;
			bottom: 202px;
			left: 250px;
			z-index: 3;
			text-align: center;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
		}

		.payByCardSuccessBox {
			position: fixed;
			width: 530px;
			height: 400px;
			background: #FFFFFF;
			bottom: 222px;
			left: 250px;
			z-index: 3;
			text-align: center;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
			padding-top: 20px;
		}

	}







	.itemIitle {
		width: 100%;
		text-align: center;
		font-size: 1.8625rem;
		margin-top: 1.125rem;
	}

	.successBox {
		width: 150px;
		height: 139px;
		margin-top: 50px;
	}

	.cardMar {
		margin-top: 25px;
	}


	.topBox {
		width: 100%;
		height: 50px;
		margin-top: 21px;
		margin-left: 20px;
	}

	.topBoxLeft {
		float: left;
		height: 100%;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #57A8FF;
	}

	.topBoxRight {
		width: 50px;
		height: 50px;
		background: #57A8FF;
		border-radius: 6px;
		position: absolute;
		right: 0px;
		top: 0px;
		color: #FFF0FF;
		font-size: 4.7vw;
	}
</style>
